<template>
    <div class="line-chart">
        <div class="block-title">
            <span>收支情况图</span>
            <div class="title-right">
                <span>时间区间</span>
                <el-date-picker
                    size="mini"
                    v-model="dates"
                    @change="handleDateChange"
                    type="daterange"
                    :editable="false"
                    value-format="yyyy-MM-dd" 
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                </el-date-picker>
            </div>
        </div>
        <div class="chart-wrap">
            <div id="lineChart" style="width:100%;height:100%"></div>
        </div>
    </div>
</template>
<script>
import echarts from '@/lib/echarts.js';
import { debounce } from '@/lib/utils';
export default {
    data(){
        return{
            chart: null,
            loading:false,
            dates:[],
            legendData:['收入','支出'],
            xAxisData:['一月','二月','三月','四月','五月','六月'],
            incomeData:['0','0','0','0','0','0'],
            paymentData:['0','0','0','0','0','0']
        }
    },
    beforeDestroy() {
        if (!this.chart) {
            return
        }
        if(this.chart){
            //this.chart.dispose();
            this.chart.clear();
        }
        this.chart = null;
    },
    mounted() {
        this.init();
    },
    methods: {
        init(){
            this.getData();
        },
        getData(){
            this.xAxisData = ['一月','二月','三月','四月','五月','六月'];
            this.incomeData = ['1000','3000','5000','8000','12000','8000'];
            this.paymentData = ['1000','5000','7000','3000','6000','3000'];
            this.chartFn(this.legendData,this.xAxisData,this.incomeData,this.paymentData);
        },
        chartFn(legendData,xAxisData,incomeData,paymentData){
            var _this = this;
            if (_this.chart) {
                _this.chart.dispose();
                _this.chart = null;
            }
            var dom = document.getElementById("lineChart");
            console.log('dom',dom)
            if(!dom || dom == null){
                return;
            }
            _this.chart = echarts.init(dom);
            var app = {};
            var option = null;
            option = {
                color:['#FF406B','#00E290'],
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: legendData
                },
                toolbox: {
                    show: true,
                    feature: {
                        dataView: {show: true, readOnly: false},
                        magicType: {show: true, type: ['line', 'bar']},
                        restore: {show: true},
                        saveAsImage: {show: true}
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                calculable: true,
                xAxis: [
                    {
                        type: 'category',
                        data: xAxisData
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: '收入',
                        type: 'bar',
                        data: incomeData,
                        markPoint: {
                            data: [
                                {name: '收入最多', value: 12000, xAxis: 4, yAxis: 12000},
                                {name: '收入最少', value: 1000, xAxis: 0, yAxis: 1000}
                            ]
                        },
                        markLine: {
                            data: [
                                {type: 'average', name: '平均值'}
                            ]
                        }
                    },
                    {
                        name: '支出',
                        type: 'bar',
                        data: paymentData,
                        markPoint: {
                            data: [
                                {name: '支出最多', value: 7000, xAxis: 2, yAxis: 7000},
                                {name: '支出最少', value: 1000, xAxis: 0, yAxis: 1000}
                            ]
                        },
                        markLine: {
                            data: [
                                {type: 'average', name: '平均值'}
                            ]
                        }
                    }
                ]
            };
            if (option && typeof option === "object") {
                _this.chart.setOption(option, true);
            }
            var resizeHanlder = debounce(() => {
                if(_this.chart){
                    _this.chart.resize();
                }
            }, 100);
            window.addEventListener('resize', resizeHanlder);
        },
        handleDateChange(){
            this.getData();
        }
    },
}
</script>
<style lang="less" scoped>
.line-chart{
    width:100%;
    height: 25vw;
    min-height: 250px;
    .title-right>span{
        font-size: 14px;
        margin-right: 10px;
    }
    .chart-wrap{
        width:100%;
        height: calc(100% - 50px);
    }
}
</style>